<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="title" label="title"></el-table-column>
      <el-table-column prop="author" label="author"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-button type="primary" @click="showAddBookForm = true">添加图书</el-button>
    <el-dialog :visible.sync="showAddBookForm" title="添加图书" @close="resetForm">
      <el-form ref="addBookForm" :model="newBook" label-width="100px">
        <el-form-item label="title" prop="title" :rules="{ required: true,trigger: 'blur' }">
          <el-input v-model="newBook.title"></el-input>
        </el-form-item>
        <el-form-item label="author" prop="author" :rules="{ required: true,trigger: 'blur' }">
          <el-input v-model="newBook.author"></el-input>
        </el-form-item>
        <el-form-item label="copies" prop="copies" :rules="{ required: true, type: 'number', trigger: 'blur' }">
          <el-input v-model.number="newBook.copies"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddBookForm = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'BookManager',
  data() {
    return {
      tableData: [
          {id: '1',title: 'Python编程',author: 'John Doe',copies: '4'}, 
           {id: '2',title: '历史的秘密',author: 'Jane Smith',copies: '3'},
           {id: '3',title: '宇宙探索',author: 'Emily Brown',copies: '2'},
           {id: '4',title: '健康生活',author: 'Mike Johnson',copies: '5'}, 
           {id: '5',title: '数学之美',author: 'Sarah Lee',copies: '4'}, 
           {id: '6',title: '艺术欣赏',author: 'David White',copies: '3'}, 
           {id: '7',title: '编程入门',author: 'Alice Green',copies: '2'}, 
           {id: '8',title: '科幻世界',author: 'Frank Black',copies: '5'}, 
           {id: '9',title: '自然奇观',author: 'Grace Blue',copies: '4'}, 
           {id: '10',title: '音乐之声',author: 'Tom Red',copies: '3'},
      ],
      newBook: {
        title: '',
        author: '',
        copies: ''
      },
      showAddBookForm: false
    };
  },
  methods: {
    submitForm() {
      this.$refs.addBookForm.validate((valid) => {
        if (valid) {
          const newId = this.tableData.length > 0 ? Math.max(...this.tableData.map(item => item.id)) + 1 : 1;
          this.tableData.push({ id: newId, ...this.newBook });
          this.showAddBookForm = false;
          this.newBook.title = '';
          this.newBook.author = '';
          this.newBook.copies = 0;
        } else {
          console.log('提交失败');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.addBookForm.resetFields();
    },
    handleDelete(bookId) {
      this.tableData = this.tableData.filter(book => book.id !== bookId);
    }
  }
};
</script>